<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
	body {background-color: #45cbff;}
	#c1,span {background-color: #fff;}
	</style>
	<script>
	window.onload = function () {
		var oC = document.getElementById('c1');
		var oGC = oC.getContext('2d');			//绘制环境

		oC.onmousedown = function (ev) {			//不是oGC
			var ev = ev || event;

			oGC.moveTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);

			document.onmousemove = function (ev) {
				var ev = ev || event;

				oGC.lineTo(ev.clientX - oC.offsetLeft, ev.clientY - oC.offsetTop);
				oGC.stroke();
			};

			document.onmouseup = function () {
				document.onmousemove = document.onmouseup = null;
			}

		}
	}
	</script>
</head>
<body>
	<canvas id="c1" width="600" height="400">
		<span>不支持canvas的浏览器</span>
	</canvas>	<!-- 默认宽300 高150 -->
</body>
</html>